<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<style>
    #bargain-index {
        background: #fff;
        padding: 0 20px 30px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 500;
    }
    label{
        margin: 0;
    }

    .color-444 {
        color: #444;
    }

    .color-666 {
        color: #444;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .activity-title {
        height: 50px;
        font-weight: 600;
    }

    .tips {
        padding: 16px;
        border-radius: 5px;
        background-color: #F1EBFA;
        position: relative;
        margin-bottom: 20px;
        font-size: 12px;
    }

    .tip-a,
    .tip-a:hover {
        color: #7536D0;
    }

    .tip-close {
        color: #7536D0;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .select-con {
        justify-content: space-between;
        font-size: 12px;
        margin-bottom: 14px;
    }

    .select-item {
        margin-right: 14px;
    }

    .recycle-activity {
        width: 98px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #444;
        color: #444;
        cursor: pointer;
        justify-content: center;
    }
    .recycle-activity i{
        margin-right: 8px;
        font-size: 16px;
    }

    .found-activity {
        width: 98px;
        height: 32px;
        background: #7536D0;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 32px;
        margin-left: 40px;
    }

    .choose-activity-goods,
    .choose-activity-method {
        background: #7536D0;
        border: none;
        color: #fff;
        height: 34px;
        line-height: 34px;
        padding: 0 20px;
        font-size: 13px;
    }

    .el-button:hover {
        background: #7536D0;
        border: none;
        color: #fff;
    }

    .el-button.is-disabled {
        border: 1px solid #EBEEF5;
    }

    .table-edit-btn {
        color: #7536D0;
        margin-right: 16px;
    }

    .table-view-btn {
        color: #7536D0;
        margin-right: 16px;
    }

    .table-delete-btn {
        color: #F54747;
    }

    .table-edit-btn:hover {
        color: #7536D0;
    }

    .table-view-btn:hover {
        color: #7536D0;
    }

    .table-delete-btn:hover {
        color: #F54747;
    }


    .el-table,
    .el-table thead {
        color: #444;
    }

    .el-table,
    .el-table thead .cell {
        font-weight: 500;

    }

    .el-table th {
        background: #F9F9F9;
    }

    .cell {
        text-align: center;
    }

    .el-select {
        width: 114px;
    }

    /* el-dialog */
    .table-good-status {
        color: #7536D0;
        margin-right: 14px;
    }

    .table-good-status-1 {
        color: #21D7AE;
    }

    .table-good-status-delete {
        color: #F54747;
    }

    .switch-flex {
        display: flex;
        align-items: center;
    }

    .switch-tip {
        margin: 0 16px;
    }

    .el-icon-question {
        font-size: 24px;
        color: #d5d5d5;

    }

    .popover-item {
        line-height: 42px;
        position: relative;
        top: 5px;
    }

    .dialog-submit {
        width: 88px;
        height: 36px;
        background: #F3EFFB;
        border: 1px solid #7536d0;
        color: #7536d0;
        position: absolute;
        right: 56px;
        border-radius: 20px;
        text-align: center;
        line-height: 36px;
    }

    .dialog-submit-gray {
        color: #999;
        border: 1px solid #999;
        background: #fff;
    }

    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: #7536d0;
        border-color: #7536d0;
        -webkit-box-shadow: -1px 0 0 0 #7536d0;
        box-shadow: -1px 0 0 0 #7536d0;
    }

    .el-radio-button__inner:hover {
        color: #666;
    }

    .el-input,
    .el-textarea,
    .el-date-editor--datetimerange.el-input,
    .el-date-editor--datetimerange.el-input__inner {
        max-width: 460px;
    }

    .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
    }

    .el-dialog {
        width: 740px;
        margin-top: 10vh !important;
    }

    .el-dialog .cell {
        text-align: left;
    }

    .el-dialog__body {
        padding: 30px 52px 40px 52px;
    }

    .el-dialog .el-radio__input.is-checked+.el-radio__label {
        color: #7536d0;
    }

    .el-dialog .el-radio__input.is-checked .el-radio__inner {
        border-color: #7536d0;
        background: #7536d0;
    }

    .el-form-item__label {
        color: #666;
        font-weight: 500;
    }

    .el-dialog__header {
        padding: 16px 20px 16px;
        border-bottom: #D5D5D5 1px solid;
    }

    .el-input__inner::-webkit-input-placeholder,
    .el-input__inner::-moz-input-placeholder,
    .el-input__inner::-ms-input-placeholder {
        color: #C0C4CF;
    }

    .el-pager li.active,
    .el-pager li:hover {
        color: #7536d0;
    }

    .display-flex {
        display: flex;
        align-items: center;
    }

    .el-form-item__content .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        /* border-right: 0; */
    }

    .el-form-item__content .choose-activity-method {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .el-form-item__content .el-button.is-disabled {
        background: #F5F7FA;
        color: #909399;
        border: 1px solid #DCDFE6;
    }

    .activityForm-auto {
        /* height: 592px;
        overflow: auto;*/
        padding-right: 44px;
    }

    .activityForm-auto::-webkit-scrollbar-track-piece {
        background-color: #f8f8f8;
    }

    .activityForm-auto::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }

    .activityForm-auto::-webkit-scrollbar-thumb {
        background-color: #dddddd;
        background-clip: padding-box;
        min-height: 28px;

    }

    .el-radio-button__inner {
        font-size: 12px;
        padding: 9px 20px;
        ;
    }

    .el-input__inner {
        font-size: 12px;
        height: 32px;
        line-height: 32px;
    }

    .el-input__icon {
        line-height: 32px;
    }

    .margin-right-5 {
        margin-right: 5px;
    }

    .el-dialog__title {
        font-size: 14px;
    }

    .el-dialog .el-input__inner {
        height: 34px;
        line-height: 34px;
        font-size: 13px;
    }

    .el-form-item__label,
    .el-radio__label,
    .el-form-item__content,
    .el-select-dropdown__item,
    .el-table {
        font-size: 13px;
    }

    .el-table_1_column_1,
    .el-table_1_column_2,
    .el-table_1_column_3,
    .el-table_1_column_4,
    .el-table_1_column_5,
    .el-table_1_column_6,
    .el-table_1_column_7,
    .el-table_1_column_8 {
        border-right: none !important;
    }

    .el-table__fixed-right::before,
    .el-table__fixed::before {
        height: 0 !important;
    }

    .el-date-editor .el-range__icon,
    .el-date-editor .el-range-separator {
        line-height: 28px;
    }
    .page-container{
        justify-content: flex-end;
        margin-top: 30px;
    }

    [v-cloak] {
        display: none;
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="bargain-index" v-cloak>
    <div class="activity-title color-444 display-flex">助力砍商品列表</div>
    <div class="activity-tip color-444" v-if="tipCloseFlag">
    </div>
    <div class="activity-con">
        <div class="select-con display-flex">
            <div class="display-flex">
                <div class="found-activity" @click="foundActivity"><i class="el-icon-plus margin-right-1"></i>新增助力砍</div>
            </div>
        </div>
        <div>
            <el-table :data="activityData" style="width: 100%" border>
                <el-table-column prop="id" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="goods_id" label="商品组" min-width="100">
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="140">
                </el-table-column>
                <el-table-column prop="activity_price" label="活动价格" width="100">
                </el-table-column>
                <el-table-column prop="activity_min_price" label="活动最低价格" width="100">
                </el-table-column>
                <el-table-column prop="stock_num" label="库存" width="100">
                </el-table-column>
                <el-table-column prop="cut_money" label="每次砍的价格" width="100">
                </el-table-column>
                <el-table-column prop="join_count" label="最少参与数" width="100">
                </el-table-column>
                <el-table-column prop="valid_time" label="砍价有效时间" width="100">
                </el-table-column>
                <el-table-column prop="success_num" label="成功数量" width="100">
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" width="150">
                    <template slot-scope="scope">
                        <span>{{moment(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status!='nostart'" class="table-view-btn cursor-pointer"
                            @click="handleClick(scope.row,'view')">查看
                        </span>
                        <span v-if="scope.row.status=='down'" class="table-edit-btn cursor-pointer"
                            @click="handleClick(scope.row,'edit')">编辑</span>
                        <span class="table-delete-btn cursor-pointer" @click="handleClick(scope.row,'delete')">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div class="page-container display-flex">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
        </el-pagination>
    </div>
    <!-- el-dialog -->
    <el-dialog title="助力砍新增" :visible.sync="dialogVisible" width="740" :before-close="handleClose"
        :close-on-click-modal="false">
        <el-form ref="activityForm" :model="activityForm" label-width="130px" :rules="rules">
            <div class="activityForm-auto">
                <el-form-item label="商品名称：" prop="goods_name">
                    <el-input v-model="activityForm.goods_name" placeholder="请输入商品名称" :disabled="disabledFlag"></el-input>
                </el-form-item>
                <el-form-item label="活动价格：" prop="activity_price">
                    <el-input v-model="activityForm.activity_price" placeholder="请输入活动价格" :disabled="disabledFlag"></el-input>
                </el-form-item>
                <el-form-item label="活动最低价格：" prop="activity_min_price">
                    <el-input v-model="activityForm.activity_min_price" placeholder="请输入最低活动价格" :disabled="disabledFlag"></el-input>
                </el-form-item>
                <el-form-item label="库存数：" prop="stock_num">
                    <el-input type='number' v-model.number="activityForm.stock_num" placeholder="库存数"
                        :disabled="disabledFlag"><template slot="append">个</template></el-input>
                </el-form-item>
                <el-form-item label="每次砍的价格：" prop="cut_money">
                    <el-input type='number' v-model.number="activityForm.cut_money" placeholder="每次砍的价格"
                        :disabled="disabledFlag"><template slot="append">元</template></el-input>
                </el-form-item>
                <el-form-item label="参与人：" prop="join_count">
                    <el-input type='number' v-model.number="activityForm.join_count" placeholder="人数"
                        :disabled="disabledFlag"><template slot="append">人</template></el-input>
                </el-form-item>
                <el-form-item label="有效时间：" prop="valid_time">
                    <el-input type='number' v-model.number="activityForm.valid_time" placeholder="有效时长"
                        :disabled="disabledFlag"><template slot="append">小时</template></el-input>
                </el-form-item>
                <el-form-item label="成功送出数量：" prop="success_num">
                    <el-input type='number' v-model.number="activityForm.success_num" placeholder="成功数量"
                        :disabled="disabledFlag"><template slot="append"></template></el-input>
                </el-form-item>
                <el-form-item label="活动商品描述：" prop="product_desc">
                    <el-input v-model="activityForm.product_desc" placeholder="请输入商品名称" :disabled="disabledFlag"></el-input>
                </el-form-item>
                <el-form-item label="选择商品：" prop="goods_list">
                    <el-input style="display: none;" v-model="activityForm.goods_list"></el-input>
                    <el-button class="choose-activity-goods" :disabled="disabledFlag" @click="chooseGoods('activity')">
                        商品选择</el-button>
                </el-form-item>
                <el-form-item style="margin-bottom: 20px;">
                    <el-table :data="activityForm.goods_list" style="width: 100%"
                        v-if="activityForm.goods_list.length>0 ">
                        <el-table-column label="商品信息" width="320">
                            <template slot-scope="scope">
                                <div style="display: flex;">
                                    <img style="width: 46px;height: 46px;margin-right: 15px;"
                                        :src="Fast.api.cdnurl(scope.row.image)" alt="" srcset="">
                                    <span style="width:200px;">{{scope.row.title}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="table-good-status cursor-pointer" v-if="activityFormType=='view'"
                                    @click="chooseActivityPrice(scope.row.id,scope.$index,encodeURI(scope.row.actSkuPrice))">查看详情</span>
                                <span class="table-good-status-delete cursor-pointer" v-if="activityFormType!='view'"
                                    @click="selectDelete(scope.$index)">移除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </div>
            <el-form-item>
                <div v-if="activityFormType!='view' && formSubFlag" class="dialog-submit cursor-pointer" type="primary"
                    @click="submitForm('activityForm')">确认
                </div>
                <div v-if="activityFormType!='view' && !formSubFlag" class="dialog-submit dialog-submit-gray"
                    type="primary">确认</div>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>